<template>
  <div>

    <!--  table  -->
    <el-drawer
      :before-close="handleClose"
      :close-on-press-escape="false"
      :show-close="false"
      :visible.sync="drawerVisible"
      :with-header="false"
      ref="drawer"
      size="60%"
    >
      <el-card style="margin: 10px">
        <div slot="header">
          <span>添加打印文件</span>
          <!--          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
        </div>
        <!--  title="新增 | 编辑 打印前配置" -->
        <el-form :label-width="globalLabelWidth" :model="createdFormData" :rules="rule" ref="createFormData"
                 style="margin: 10px;">
          <el-row :gutter="globalGutter">

            <el-col :span="8">
              <el-form-item label="分割方向">
                <el-select @change="handleSplitDirChange" v-model="createdFormData.splitDirection">
                  <el-option
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                    v-for="item in splitOptions"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="扩展边缘类型">
                <el-select v-model="createdFormData.expendType">
                  <el-option
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                    v-for="item in expendTypeOptions"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="分割个数">
                <el-input :disabled="createdFormData.splitDirection===2"
                          v-model="createdFormData.splitNum"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="globalGutter">
            <el-col :span="8">
              <el-form-item label="脚线长度(mm)">
                <el-input v-model="createdFormData.cutLineLength"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="扩展宽度(mm)">
                <el-input v-model="createdFormData.expendWidth"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="高度(mm)">
                <el-input v-model="createdFormData.height"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="globalGutter">
            <el-col :span="8">
              <el-form-item label="备注高度(mm)">
                <el-input v-model="createdFormData.remarkHeight"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注方向">
                <el-select v-model="createdFormData.remarkLocation">
                  <el-option
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                    v-for="item in locationOptions"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="宽度(mm)">
                <el-input v-model="createdFormData.width"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="globalGutter">
            <el-col :span="8">
              <el-form-item label="扩展颜色">
                <!--              <el-input disabled v-model="createdFormData.expendColor">-->
                <!--              </el-input>-->
                <el-color-picker
                  :predefine="predefineColors"
                  v-model="createdFormData.expendColor"></el-color-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="globalGutter">
            <el-col :span="24" style="text-align: right;margin-right: 15px;">
              <el-button @click="drawerVisible = false">关 闭</el-button>
              <el-button @click="submitDrawer('createdFormData')" type="primary">
                {{ loading ? '提交中 ...' : '新 增' }}
              </el-button>
            </el-col>
          </el-row>
        </el-form>

        <!--        <div class="demo-drawer__footer" style="text-align: right;margin-right: 15px;">-->
        <!--          <el-button @click="drawerVisible = false">取 消</el-button>-->
        <!--          <el-button @click="submitDrawer('createdFormData')" type="primary">{{ loading ? '提交中 ...' : '确定' }}-->
        <!--          </el-button>-->
        <!--        </div>-->
      </el-card>

    </el-drawer>

    <el-alert
      :closable="false"
      effect="dark"
      show-icon
      title="目前没有修改,日后完善."
      type="info"
    >
    </el-alert>
    <!--     form  > row > col > formItem > input ...     -->
    <AzureDynamicTable
      :column-des-objs="columnDesObjs"
      :data="tableData"
      :showSeq="true"
      empty-text="暂无配置的打印前配置,请点击左上角添加"
      v-loading="listLoading"
    >
      <template #tableHead>
        <a-button @click="handleAddHalfProduct">新增打印前配置</a-button>
      </template>
      <template #expendColor="{scope:{row:{expendColor},$index}}">
        <div :style="`background : ${expendColor}`"
             style="width: 20px;height: 20px;border-radius: 50%;margin-right: 10px;">
        </div>
        <div>{{expendColor}}</div>
      </template>
      <template slot="operator" slot-scope="{scope:{row,$index}}">
        <AButton @click="handleEditProduct({row,$index})" type="primary">编辑</AButton>
        <el-popconfirm
          @onConfirm="handleDeleteProduct({row,$index})"
          style="margin-left: 10px;"
          title="是否确定删除该产品？">
          <AButton slot="reference" type="info">
            删除
          </AButton>
        </el-popconfirm>
      </template>

    </AzureDynamicTable>
  </div>
</template>

<script>

  import AButton from '@/components/ATheFridayClub/AButton'
  import AzureDynamicTable from '@/components/ATheFridayClub/mDynamicTable/AzureDynamicTable'
  import {
    QueryProductProcessBeforePrintSetting,
    ModifyPrintSetting,
    DeleteProductProcessBeforePrintSetting
  } from '@/api/productInformation'
  import { ERR_OK } from '@/utils/commons'
  import layoutMixin from '@/mixins/layoutMixin'
  import form from '@/mixins/form'
  import { spiltDirectionStatus, getExpendType } from '@/enums/product'

  const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    // 'rgba(255, 69, 0, 0.68)',
    // 'rgb(255, 120, 0)',
    // 'hsv(51, 100, 98)',
    // 'hsva(120, 40, 94, 0.5)',
    // 'hsl(181, 100%, 37%)',
    // 'hsla(209, 100%, 56%, 0.73)',
    '#c7158577'
  ]

  //  'rgba(255, 69, 0, 0.68)'
  export default {
    name: 'processBeforePrint',
    components: { AButton, AzureDynamicTable },
    data() {
      return {
        predefineColors,

        drawerVisible: false,
        tableData: [],
        loading: false,
        listLoading: false,
        columnDesObjs: [
          { key: 'id', label: 'id', isDefaultShowDynamicColumn: false },
          { key: 'productId', label: '产品ID', isDefaultShowDynamicColumn: false },
          { key: 'expendType', label: '扩展边缘类型', filter: getExpendType },
          { key: 'cutLineLength', label: '脚线长度(mm)' },
          { key: 'expendWidth', label: '单位(mm)' },
          { key: 'width', label: '宽(mm)' },
          { key: 'height', label: '高(mm)' },
          { key: 'expendColor', label: '颜色', width: 260 },
          { key: 'remarkHeight', label: '备注高度(mm)', isDefaultShowDynamicColumn: false },
          { key: 'remarkLocation', label: '备注方向', isDefaultShowDynamicColumn: false },
          { key: 'splitDirection', label: '分割方向', filter: spiltDirectionStatus },
          { key: 'splitNum', label: '分割个数' },
          { key: 'operator', label: '操作', width: 200 }
        ],
        expendTypeOptions: [
          { label: '无', key: 0 },
          { label: '图像', key: 1 },
          { label: '颜色', key: 2 }
        ],
        locationOptions: [
          { label: '上', key: 1 },
          { label: '下', key: 2 },
          { label: '左', key: 4 },
          { label: '右', key: 8 },
          { label: '无', key: 18 }
        ],
        splitOptions: [
          { label: '横方向', key: 0 },
          { label: '竖方向', key: 1 },
          { label: '无', key: 2 }
        ],
        createdFormData: {
          cutLineLength: null,
          expendColor: '',
          expendType: null,
          // expendTypeName: null,
          expendWidth: null,
          height: null,
          id: null,
          productId: null,
          remarkHeight: null,
          remarkLocation: null,
          // remarkLocationName: null,
          splitDirection: null,
          // splitDirectionName: null,
          splitNum: null,
          width: null
        },
        rule: {},
        productId: 0
      }
    },
    mixins: [layoutMixin, form],
    created() {
      // console.log(this.$route.query.ProductId,'52::::::::::')
      this.productId = this.$route.query.ProductId
      this.getData()
    },
    filters: {},
    methods: {
      handleSplitDirChange(nv) {
        console.log(nv)
        if (nv === 2) {
          this.createdFormData.splitNum = 0
        }
      },
      handleAddHalfProduct() {
        //  产品工厂函数
        //  visible open
        this.drawerVisible = true
      },
      handleEditProduct() {

      },
      async handleDeleteProduct(row, index) {
        try {
          const { Code, Result } = await DeleteProductProcessBeforePrintSetting([
            row.row.id
          ])
          if (Code === ERR_OK) {
            this.$message.success('删除成功')
            this.getData()
          }
        } catch (e) {
          console.log(e)
        }
      },
      handleClose(done) {
        this.$confirm('您还没有完成新增,请是否确认退出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(_ => {
          // this.loading = true
          // this.submitDrawer()
          done()
        }).catch(_ => {
        }).finally(() => {
          this.loading = false
        })
      },

      async submitDrawer(formName) {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        // alert('submit!')
        try {
          const {
            createdFormData: {
              cutLineLength, expendColor, expendType, expendTypeName, expendWidth,
              height, id, productId, remarkHeight, remarkLocation, remarkLocationName,
              splitDirection, splitDirectionName, splitNum, width
            }
          } = this
          const { Code, Result } = await ModifyPrintSetting([
            {
              cutLineLength, expendColor, expendType, expendTypeName, expendWidth,
              height, id, productId: this.productId, remarkHeight, remarkLocation, remarkLocationName,
              splitDirection, splitDirectionName, splitNum, width
            }
          ])
          if (Code === ERR_OK) {
            this.$message.success('新增成功！')
            this.getData()
            this.drawerVisible = false
            this.loading = false
          }
        } catch (e) {
          console.log(e)
        }
      },

      getData() {
        QueryProductProcessBeforePrintSetting({
          productId: this.productId,
          id: 0
        }).then(res => {
          console.log(res, 71)
          this.tableData = res.Result
        }).catch(err => {
          console.log(err)
        })
      }
    }

    //  改 删除 增加 POST /api/Product/ModifyPrintSetting
  }
</script>

<style lang="scss" scoped>

</style>
